<template>
  <el-dialog
    v-model="dialogVisible"
    width="500px"
    :close-on-click-modal="false"
    class="unified-dialog alert-escalate-dialog"
  >
    <template #header>
      <div class="dialog-header">
        <div class="header-icon header-icon-danger">
          <el-icon><Top /></el-icon>
        </div>
        <div class="header-content">
          <h3>升级告警</h3>
          <p>提升告警优先级并发送通知</p>
        </div>
      </div>
    </template>
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="告警信息">
        <el-text>{{ alert?.job_name }} - {{ alert?.alert_type }}</el-text>
      </el-form-item>
      
      <el-form-item label="升级原因" prop="escalation_reason">
        <el-input
          v-model="form.escalation_reason"
          type="textarea"
          :rows="3"
          placeholder="请输入升级原因"
        />
      </el-form-item>
      
      <el-form-item label="通知方式">
        <el-checkbox-group v-model="form.notification_methods">
          <el-checkbox label="email">邮件通知</el-checkbox>
          <el-checkbox label="sms">短信通知</el-checkbox>
          <el-checkbox label="webhook">Webhook</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="danger" @click="handleConfirm" :loading="loading">
          <el-icon><Top /></el-icon>
          确认升级
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, computed } from 'vue'
import { useAlertsStore } from '@/stores/alerts'
import { ElMessage } from 'element-plus'
import { Top } from '@element-plus/icons-vue'
import { componentLogger } from '@/utils/logger'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  alert: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue', 'success'])

const alertsStore = useAlertsStore()
const formRef = ref()
const loading = ref(false)

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const form = reactive({
  escalation_reason: '',
  notification_methods: ['email']
})

const rules = {
  escalation_reason: [
    { required: true, message: '请输入升级原因', trigger: 'blur' }
  ]
}

const handleCancel = () => {
  dialogVisible.value = false
  resetForm()
}

const handleConfirm = async () => {
  try {
    await formRef.value?.validate()
    loading.value = true
    
    await alertsStore.escalateAlert(props.alert.id, {
      escalation_reason: form.escalation_reason,
      notification_methods: form.notification_methods
    })
    
    dialogVisible.value = false
    resetForm()
    emit('success')
  } catch (error) {
    componentLogger.error('升级告警失败:', error)
  } finally {
    loading.value = false
  }
}

const resetForm = () => {
  form.escalation_reason = ''
  form.notification_methods = ['email']
}

watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    resetForm()
  }
})
</script>

<style scoped>
/* 对话框已使用统一样式系统 (dialog-system.css) */

/* 响应式设计 */
@media (max-width: 768px) {
  .alert-escalate-dialog {
    width: 95% !important;
    margin: 0 auto;
  }
}
</style>